/**
 * @author(s) nicholas malacarne <nicholas.malacarne@gmail.com>
 */
// load required scripts -nm
$.loadScript( "js/ajax/load.events.ajax.js" );
$.loadScript( "js/ajax/get.event.ajax.js" );

$( document ).ready(function() {
    
    var cal = $( "#calendar" ).calendario({
        
        onDayClick: function( $el, $contentEl, dateProperties ){
            //console.log("click event");
            
            var realWeekDay= "";
            var eventData = "";
            var ajaxMonth = "";
            var ajaxDay = "";
            var ajaxDate = "";
            
            if (dateProperties.weekdayname === undefined){
                realWeekDay = "Sunday"
            }else{
                realWeekDay = dateProperties.weekdayname;
            }
            
            var dateFormat = realWeekDay;
            
            dateFormat += ", ";
            dateFormat += dateProperties.monthname;
            dateFormat += " ";
            dateFormat += dateProperties.day;
            dateFormat += "th";
            dateFormat += ", ";
            dateFormat += dateProperties.year;
            ajaxMonth  += dateProperties.month;
            ajaxDay    += dateProperties.day;
            if (ajaxMonth.length === 1){
                ajaxMonth = "0" + ajaxMonth;
            }
            if (ajaxDay.length === 1){
                ajaxDay = "0" + ajaxDay;
            }
            ajaxDate = ajaxMonth + "-" + ajaxDay + "-" + dateProperties.year;

            get_event_ajax( {date: ajaxDate} ).done(function(data){
                var html = "";
                
                html += "<tr>";
                html += "<th>Time</th>";
                html += "<th>Event</th>";
                html += "<th>Location</th>";
                html += "</tr>";

                $( "#events" ).append(html);

                for ( var i = 0; i < data.length; i++ ){
                    html = "";
                    
                    html += "<tr>";
                    html += "<td>";
                    html += data[i]["eventTime"];
                    html += "</td>";
                    html += "<td>";
                    html += data[i]["eventDescription"];
                    html += "</td>";
                    html += "<td>";
                    html += data[i]["eventLocation"];
                    html += "</td>";
                    html += '<td><span class="" id="edit"></span>*</td>';
                    html += '<td><span class="" id="del_btn">X</span></td>';
                    html += "</tr>";
                    //console.log(JSON.stringify(event));
                    $( "#events" ).append(html);
                }
            });
            
            html = "";
            
            html += "<tr>";
            html += "<td>";
            html += "<select id='hour>'";
            html += "<option>1</option>";
            html += "<option>2</option>";
            html += "<option>3</option>";
            html += "<option>4</option>";
            html += "<option>5</option>";
            html += "<option>6</option>";
            html += "<option>7</option>";
            html += "<option>8</option>";
            html += "<option>9</option>";
            html += "<option>10</option>";
            html += "<option>11</option>";
            html += "<option>12</option>";
            html += "</select>";
            html += ":";
            html += "<select id='minute'>";
            html += "<option>00</option>";
            html += "<option>15</option>";
            html += "<option>30</option>";
            html += "<option>45</option>";
            html += "</select>";
            html += "<select id='tod'>";
            html += "<option>AM</option>";
            html += "<option>PM</option>";
            html += "</select>";
            html += "</td>";
            html += "<td>";
            html += "<input type='text' id='event' />";
            html += "</td>";
            html += "<td>";
            html += "<input type='text' id='location' />";
            html += "</td>";
            html += "<td><span class='fui-plus' id='add_btn'>+</span></td>";
            html += "</tr>";
            
            $( "#events" ).append(html);
            
            $( "#date" ).html(dateFormat);
            $( "#editor" ).fadeIn();
        }
    }),
    $month = $( '#custom-month' ).html( cal.getMonthName() ),
    $year = $( '#custom-year' ).html( cal.getYear() );
    
    $( '#custom-next' ).on( 'click', function() {
            cal.gotoNextMonth( updateMonthYear );
    } );
    $( '#custom-prev' ).on( 'click', function() {
            cal.gotoPreviousMonth( updateMonthYear );
    } );
    $( '#custom-current' ).on( 'click', function() {
            cal.gotoNow( updateMonthYear );
    } );
    
    function updateMonthYear() {				
            $month.html( cal.getMonthName() );
            $year.html( cal.getYear() );
    }
    
    load_events_ajax().done(function( data ){

        cal.setData( data );
    });
    
    /**hides container when you click on close button -cc**/
    $( "#close_btn" ).click(function(){
        
        $( "#editor" ).fadeOut({
            complete: function(){
                $( "#date" ).empty();
                $( "tbody" ).html("");
            }
        });
    });
});